Leer más- Read More (Con imagen)

Hay muchas maneras de insertar el código de leer más o Read more.
Esta que voy a explicar la encontré en alguna página cuando todo esto de Blogger beta me sonaba a cuento chino, ahora me alegro de haberlo guardado.
No recuerdo la página, por lo tanto si la persona que tuvo la genial idea de postearlo piensa que el código puede ser suyo le ruego me lo haga saber para citar el autor.
Ahora bien, yo he querido personalizar este código con una imagen, ese detalle si ha sido idea mía y creo que es justo que lo diga porque las ideas no fluyen siempre en cualquier momento y estoy contenta con el resultado ;)
Para aplicar el efecto de leer más lo primero que hay que hacer es situarse en:

Plantilla/Edición HTML/Expandir plantillas de artilugios.

Buscamos las etiquetas </b:skin> y </head>
Y pegamos el código de color rojo.

</b:skin>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.fullpost {display:inline;}
.summarypost {display:none;}
</style>
<b:else/>
<style type='text/css'>
.fullpost {display:none;}
.summarypost {display:inline;}
</style>
</b:if>

</head>

Luego en cada pots donde deseamos que salga el efecto de´´leer más`` aplicaremos lo siguiente:

(Aquí escribimos el principio de la entrada )

<span class="summarypost">
<a href="link-de-la-entrada">Seguir Leyendo... </a>
</span>

<span class="fullpost">
( Aquí escribimos la parte de entrada que veremos extendida )
</span>

Para que el texto de ´´Leer más...`` haga el efecto de expandir la entrada deberemos incluir el link de la entrada.
¿Cómo conseguimos el link? Lo explico:
Le damos salida al post y clicamos en la fecha que hay junto al autor de la entrada, eso es el permanent link.
Copiamos la URL de la barra de direcciones, editamos de nuevo la entrada y pegamos la URL donde dice: link-de-la-entrada y damos salida de nuevo.

Hay una forma de no tener que aplicar este código cada vez que escribimos una entrada, es más cómodo y ahorra tiempo, basta con aplicar este útimo código en la plantilla de entrada, la encontraréis en este orden:
Opciones/Formato/Plantilla de entrada
Eso hace que quede ´´grabado`` el código y salga en todas las entradas, pero con la posibilidad de escoger a que entradas le añadimos ´´el leer más`` de no desearlo lo eliminamos y listo.

Ahora viene la parte donde yo puse mi granito de arena, añadiendo una imagen en vez del clásico texto lo hice de la forma siguiente:
Escogéis la imagen, en mi caso quise que esa imagen fuera un texo diferente, lo hice con un generador de botones, pero podéis hacerlo con cualquier editor de imagen.
Luego en la plantilla de entrada eliminé donde dice: Seguir Leyendo... y añadí el código para imagen:
<img src="aquí-la-url-de-la-imagen" />
De esta forma apareció la imagen/texto que veis:


Sería un código a poner más o menos así:

(Aquí escribimos el principio de la entrada )

<span class="summarypost">
<a href="link-de-la-entrada"><img src="aquí-la-url-de-la-imagen" /></a>
</span>

<span class="fullpost">
( Aquí escribimos la parte de entrada oculta que se extenderá )
</span>

También podéis poner una flecha, un botón de aviso o cualquier otra imagen pequeña para ese menester, eso es a gusto de cada uno.
Recuerda que este código es aplicable al nuevo Blogger, si aún usas el antiguo puedes aplicar el código que encontrarás aquí
Y eso es todo, no te quedes con dudas, si las tienes házmelo saber :)